<template>
    <div class="unitBar">
    <div class="componentTitle">这是commChild.vue子组件</div>
    <div class="componentInfo">
        <span>该组件声明函数(function)handleShow供父组件调用</span>
        <span>来自父组件的两值之和：<b>{{bInner}}</b></span>
    </div>
  </div>
</template>

<script setup>

import {ref} from 'vue';
let content=ref({name:'xiaofei'});
let bInner=ref('');
function handleShow(va,vb){
    alert('函数handleShow被调用');
    bInner.value=parseInt(va+vb);
    console.log(va,vb);
}
defineExpose({
    content,
    handleShow,
})
</script>

<style scoped>
.unitBar{
    width: 100%;
    border: 2px solid #0076ee;
}
.componentTitle{
  width: 100%;
  height: 30px;
  background-color:  #0076ee;
  line-height: 30px;
  text-align: center;
  color: #ffff;
}
.componentInfo{
  height: 40px;
  line-height: 50px;
}
span{
    margin: 0 20px;
}
</style>